<template>
  <div class="home">
    <el-backtop />
    <el-row :gutter="20">
      <el-col :span="4" :offset="1">
        <el-card class="grid-content bg-purple-light classify introduce">
          <el-image :src="desc.avatar" fit="contain" class="image" />
          <div class="introduce-container">
            <div class="introduce-title">{{ desc.nickname }}</div>
            <el-collapse v-model="activeNames" accordion>
              <el-collapse-item title="技术" name="1">{{ desc.technology }}</el-collapse-item>
              <el-collapse-item title="兴趣" name="2">{{ desc.interest }}</el-collapse-item>
              <el-collapse-item title="游戏" name="3">{{ desc.game }}</el-collapse-item>
            </el-collapse>
            <div class="motto">{{ desc.motto }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="14">
        <el-card header="最新文章" class="grid-content bg-purple-light">
          <article-list ref="articleAction"></article-list>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card header="随机推荐" class="grid-content bg-purple-light classify">
          <div
            v-for="article in randomArticles"
            :key="article.articleId"
            class="text item"
            @click="toArticle(article.articleId)"
            style="cursor: pointer;"
          >
            {{ article.title }}
            <el-divider></el-divider>
          </div>
        </el-card>
        <el-card header="标签" class="grid-content bg-purple-light classify">
          <tags-wall :tags="tags"></tags-wall>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { getDesc, getTags, getRandomArticles } from '@/api/request'
import type { Config, Desc, Tag, Article } from '@/api/type'
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()

const activeNames = ref([])

const desc = reactive<Desc>({
  avatar: '',
  nickname: '',
  technology: '',
  interest: '',
  motto: '',
  game: ''
})

const tags = ref<Tag[]>()

const articleAction = ref()

const randomArticles = ref<Article[]>()

onMounted(() => {
  console.log('hello blog')
  initData()
})

const tagItems = ref([
  '',
  'success',
  'info',
  'danger',
  'warning'
])

const initData = async () => {
  const descConfig: Config[] = await getDesc()
  for (let i = 0; i < descConfig.length; i++) {
    if (descConfig[i].configKey === 'avatar') {
      desc.avatar = import.meta.env.VITE_SERVICE_BASE_URL + descConfig[i].configValue
    } else if (descConfig[i].configKey === 'nickname') {
      desc.nickname = descConfig[i].configValue
    } else if (descConfig[i].configKey === 'technology') {
      desc.technology = descConfig[i].configValue
    } else if (descConfig[i].configKey === 'interest') {
      desc.interest = descConfig[i].configValue
    } else if (descConfig[i].configKey === 'motto') {
      desc.motto = descConfig[i].configValue
    } else if (descConfig[i].configKey === 'game') {
      desc.game = descConfig[i].configValue
    }
  }
  tags.value = await getTags()
  randomArticles.value = await getRandomArticles()
}

const toArticle = (articleId: number) => {
  router.push({ path: '/content/' + articleId })
}
</script>

<style lang="less" scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.classify {
  margin-bottom: 20px;
  padding: 0;
}

.introduce {
  :deep(.el-card__body) {
    padding: 0;
  }
}

.image {
  width: 100%;
  display: block;
}

.introduce-container {
  margin: 15px;
  min-height: 50px;
  .introduce-title {
    text-align: center;
    margin: 10px;
  }
}

.motto {
  text-align: center;
  margin-top: 10px;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0, #f22),
    color-stop(0.15, #f2f),
    color-stop(0.3, #22f),
    color-stop(0.45, #2ff),
    color-stop(0.6, #2f2),
    color-stop(0.75, #2f2),
    color-stop(0.9, #ff2),
    color-stop(1, #f22)
  );
  color: transparent;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -ms-background-clip: text;
  background-clip: text;
}

.el-pagination {
  justify-content: center;
}
</style>
